.overflow-hidden {
  overflow: hidden !important;
}

.vertical-top {

  > * {
    vertical-align: top;
  }
}

strong + table {
  margin-top: @base-padding;
}

.text-small {
  font-size: 65%;
}

// Bold
.text-bold {
  font-weight: bold;
}

// Address
address {
  padding-left: @base-margin;
  border-left: 5px solid #f0f0f0;
}

// Scrollable inside Scrollable
.scrollable .scrollable {
  margin-right: @base-margin;
}

// Super Large Text
.super-large {
  font-size: @font-size-h1 * 2;
}

// Inline
.inline {
  display: inline-block !important;
}

div.text-overflow {
  .text-overflow();
  max-width: 100%;
}

.list-margin {
  margin: @base-padding 0;

  li {
    padding: @base-padding/2 0;
  }
}

.rotate-45deg {
  position: relative;
  .rotate(45deg);
}

.text-medium {
  font-size: @font-size-small;
}

.text-bold {
  font-weight: bold;

  &.h1,
  &.h2,
  &.h3,
  &.h4,
  &.h5,
  &.h6 {
    font-weight: bold;
  }
}

.text-upper {
  text-transform: uppercase;
}

// Chart Item
.chart-item-bg {
  position: relative;
  background: #fff;
  width: 100%;
  margin-bottom: @default-padding;

  .chart-label {
    position: absolute;
    left: 0;
    top: 0;
    padding: @default-padding;
    font-size: @font-size-base + 2;

    &.chart-label-small {
      padding: @base-margin;
    }

    .h1, .h2, .h3, .h4 {
      margin: 0;
      padding: 0;
    }
  }

  .chart-right-legend {
    .chart-item-bg > .chart-label;
    left: auto;
    right: 0;
  }

  .chart-inner {
    padding: @base-margin;
  }

  .chart-inner-wide {
    padding: @base-margin @default-padding + 10;
  }

  .chart-entry-view {
    border-top: 1px solid #eeeeee;
    display: table;
    table-layout: fixed;
    width: 100%;

    > div {
      display: table-cell;
      vertical-align: middle;
      padding: @base-margin @default-padding;
      color: @main-text-color;
      font-size: @font-size-base + 1;
    }

    &:hover {
      background: #fafafa;
    }
  }
}

.chart-item-bg-2 {
  background: #fff;
  display: table;
  width: 100%;
  margin-bottom: @default-padding;

  > div {
    display: table-cell;
    padding: @default-padding/2;
    vertical-align: middle;
  }

  .chart-item-num {
    padding-left: 40px;
    font-size: 90px;
    color: darken(@main-text-color, 33%);
    padding-right: @default-padding;
    white-space: nowrap;

    &.num-sm {
      font-size: 70px;
    }
  }

  .chart-item-env {

    > div {
      margin: @base-padding 0;
    }
  }
}

// Skin Color Palette
.skin-color-palette {
  display: block;
  border: 1px solid #f0f0f0;
  margin-right: @base-margin;
  &:extend(.clearfix all);

  > span {
    float: left;
    width: 100% / 6;
    height: 20px;

    + span {
      border-left: 0px solid #fff;
    }
  }

  &.skin-color-palette-four {

    > span {
      width: 100% / 4;
    }
  }
}

.skin-name-link {
  font-weight: bold;
  color: @text-color;

  &:hover {
    color: @secondary-color;
  }
}

// BS Example
.bs-example {
  line-height: 1.85;

  .label {
    margin-left: 2px;
  }
}

.same-margin {

  > * {
    margin-top: 0;
    margin-bottom: @base-padding+5;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.vspacer {
  height: 80px;

  &.v2 {
    height: 15px;
  }

  &.v3 {
    height: @default-padding;
    display: block !important;
  }

  &.v4 {
    height: @base-padding;
    display: block !important;
  }

  @media screen and (max-width: @screen-sm) {
    display: none;

    &.v2 {
      display: block;
    }
  }
}

// Image Container
.img-container {
  margin-bottom: @base-margin;
}

.img-shade {
  display: block;
  background: #f5f5f5;
  text-align: center;
  line-height: 0;
  margin-bottom: @base-margin;
}

.img-preview {
  display: inline-block;
  overflow: hidden;
  background: #f7f7f7;
  line-height: 1;

  img {
    display: block;
  }
}

.no-left-border {
  border-left: 0 !important;
}

.no-right-border {
  border-right: 0 !important;
}

.no-top-margin {
  margin-top: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.no-transition {
  .transition(none) !important;
}


// Circle image
img.img-cirlce {
  .border-radius(50%);
}

// Column margin
.col-margin.row {

  > * {
    margin-bottom: @base-margin;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.ckeditor + .cke {
  margin-top: @base-margin;
  margin-bottom: @default-padding;
}

*[class*="fa-"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Scrollable
div.scrollable {
  max-height: 200px;
  overflow: hidden;
  position: relative;
}

// icon-collection
.icon-collection {

  .page-header {
    margin: 0;
    margin-bottom: @base-padding;
  }

  section .page-header {
    margin-top: @default-padding + @base-padding;
  }

  .fontawesome-icon-list {
    &:extend(.clearfix all);

    .fa-hover {
      background: #fff;
      float: left;
      width: 24%;
      margin-right: @base-padding;
      margin-bottom: @base-padding;
      border: 1px solid @default-border-color;
      &:extend(.clearfix all);


      &:nth-child(4n) {
        margin-right: 0;
      }

      @media (max-width: @screen-sm-max) {
        width: 31%;

        &:nth-child(3n) {
          margin-right: 0;

          i {

            &:hover {
              margin: 0;
            }
          }
        }

        &:nth-child(4n) {
          margin-right: @base-padding;
          clear: right;
        }
      }

      @iwidth: 25%;

      > i {
        display: block;
        float: left;
        position: relative;
        background: #fafafa;
        border-right: 1px solid lighten(@input-border, 2%);
        padding: @base-padding;
        text-align: center;
        width: @iwidth;
        &:extend(.transall);

        &:hover {
          width: 60%;
          background: @secondary-color;
          color: #fff;
          margin: -1px;

          + span {
            width: 40%;
          }
        }
      }

      > span {
        display: block;
        float: right;
        .text-overflow();
        padding: @base-padding;
        padding-bottom: @base-padding - 2;
        width: 100% - @iwidth;
        color: darken(@main-text-color, 10%);
        &:extend(.transall);

        &:hover {
          color: @text-color;
        }
      }
    }
  }
}

// Layout Variants
.layout-variants {
  background: #fff;
  padding: @default-padding;
  //margin-top: @base-margin;
  margin-bottom: @default-padding;

  .row-clearer {
    clear: both;
    height: @default-padding/2;
  }

  .layout-variant {
    display: block;
    margin-bottom: @base-margin;
    padding: @default-padding/2;
    border: 1px solid transparent;

    &:hover, &.layout-current {
      background: fade(#f0f0f0, 20%);
      border-color: #f0f0f0;

      .layout-name a {
        color: @text-color;
      }
    }

    .layout-img {
      margin-bottom: @base-margin - 5;

      img {
        display: block;
        width: 100%;
      }
    }

    .layout-name {
      font-weight: bold;

      a {
        color: lighten(@text-color, 25%);
        max-width: 248px - 30;
        display: block;
        .text-overflow();
      }

      &:after {
        display: block;
        content: '';
        width: 20px;
        height: 1px;
        background: #ccc;
        margin: @base-padding/1.7 0;
      }
    }

    .layout-links {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 2px 0;

        a {
          color: @main-text-color;
          font-size: @font-size-small - 2;
          text-transform: uppercase;

          &:hover,
          &.layout-mode-current {
            color: darken(@main-text-color, 30%);
          }

          &.layout-mode-current {
            font-weight: bold;
          }

          &.disabled {
            cursor: not-allowed;
            color: @main-text-color;
          }
        }
      }
    }
  }
}

// Loader
@loader-1-size: 30px;
@loader-1-color: #555;
@loader-1-duration: 1000ms;

.loader-1 {
  .animation(~"loaderAnimate @{loader-1-duration} linear infinite");
  clip: rect(0, @loader-1-size, @loader-1-size, @loader-1-size/2);
  height: @loader-1-size;
  width: @loader-1-size;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -@loader-1-size/2;
  margin-top: -@loader-1-size/2;
}

.keyframes(~"loaderAnimate, 0%{ transform: rotate(0deg); } 100%{ transform: rotate(220deg); }");
.keyframes(~"loaderAnimate2, 0%{ box-shadow: inset @{loader-1-color} 0 0 0 8px; transform: rotate(-140deg); } 50%{ box-shadow: inset @{loader-1-color} 0 0 0 2px; } 100%{ box-shadow: inset @{loader-1-color} 0 0 0 8px; transform: rotate(140deg); }");

.loader-1:after {
  .animation(~"loaderAnimate2 @{loader-1-duration} ease-in-out infinite");
  clip: rect(0, @loader-1-size, @loader-1-size, @loader-1-size/2);
  content: '';
  border-radius: 50%;
  height: @loader-1-size;
  width: @loader-1-size;
  position: absolute;
}


@keyframes loaderAnimate2 {
  0% {
    box-shadow: inset #fff 0 0 0 17px;
    transform: rotate(-140deg);
  }
  50% {
    box-shadow: inset #fff 0 0 0 2px;
  }
  100% {
    box-shadow: inset #fff 0 0 0 17px;
    transform: rotate(140deg);
  }
}


// Loader 2
@loader-2-size: 30px;
@loader-2-color: #fff;
@loader-2-duration: 1000ms;

.loader-2 {
  .animation(~"loaderAnimate2 @{loader-2-duration} linear infinite");
  clip: rect(0, @loader-2-size, @loader-2-size, @loader-2-size/2);
  height: @loader-2-size;
  width: @loader-2-size;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -@loader-2-size/2;
  margin-top: -@loader-2-size/2;
}

.keyframes(~"loaderAnimate2, 0%{ transform: rotate(0deg); } 100%{ transform: rotate(220deg); }");
.keyframes(~"loaderAnimate22, 0%{ box-shadow: inset @{loader-2-color} 0 0 0 8px; transform: rotate(-140deg); } 50%{ box-shadow: inset @{loader-2-color} 0 0 0 2px; } 100%{ box-shadow: inset @{loader-2-color} 0 0 0 8px; transform: rotate(140deg); }");

.loader-2:after {
  .animation(~"loaderAnimate22 @{loader-2-duration} ease-in-out infinite");
  clip: rect(0, @loader-2-size, @loader-2-size, @loader-2-size/2);
  content: '';
  border-radius: 50%;
  height: @loader-2-size;
  width: @loader-2-size;
  position: absolute;
}


@keyframes loaderAnimate22 {
  0% {
    box-shadow: inset #fff 0 0 0 17px;
    transform: rotate(-140deg);
  }
  50% {
    box-shadow: inset #fff 0 0 0 2px;
  }
  100% {
    box-shadow: inset #fff 0 0 0 17px;
    transform: rotate(140deg);
  }
}


.page-loading-overlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: @brand-primary;
  z-index: 10000;
  .opacity(1);
  .transition(~"all 800ms ease-in-out");

  &.loaded {
    .opacity(0);
    visibility: hidden;
  }
}